.Checkbox {
  border-radius: var(--borderRadius-small);

  /* checked -> unchecked - add 120ms delay to fully see animation-out */
  transition:
    background-color,
    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1);

  &::before {
    width: var(--base-size-16);
    height: var(--base-size-16);
    visibility: hidden;
    content: '';
    /* stylelint-disable-next-line primer/colors */
    background-color: var(--fgColor-onEmphasis);
    transition: visibility 0s linear 230ms;
    clip-path: inset(var(--base-size-16) 0 0 0);
    mask-image: url('');
    mask-size: 75%;
    mask-repeat: no-repeat;
    mask-position: center;
    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }

  &:checked,
  &:indeterminate {
    background: var(--control-checked-bgColor-rest);

    /* using bgColor here to avoid a border change in dark high contrast */
    /* stylelint-disable-next-line primer/colors */
    border-color: var(--control-checked-bgColor-rest);

    &::before {
      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
    }

    &:disabled {
      background-color: var(--control-checked-bgColor-disabled);
      border-color: var(--control-checked-borderColor-disabled);
      opacity: 1;

      &::before {
        /* stylelint-disable-next-line primer/colors */
        background-color: var(--control-checked-fgColor-disabled);
      }
    }

    /* Windows High Contrast mode */
    @media (forced-colors: active) {
      background-color: canvastext;
      border-color: canvastext;
    }
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:checked {
    transition:
      background-color,
      border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;

    &::before {
      visibility: visible;
      transition: visibility 0s linear 0s;
    }
  }

  &:indeterminate {
    background: var(--control-checked-bgColor-rest);

    &::before {
      mask-image: url('');
      visibility: visible;
    }
  }

  &:focus-visible:not(:disabled) {
    @mixin focusOutline 2px;
  }
}

@keyframes checkmarkIn {
  from {
    clip-path: inset(var(--base-size-16) 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes checkmarkOut {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(var(--base-size-16) 0 0 0);
  }
}
